<template>
    <div class="order-detail">
        <!--收货信息-->
        <div class="table-list">
            <div class="table-header">收货信息</div>
            <div class="table-item">用户昵称：{{ value.username }}</div>
            <div class="table-item">收货人：{{ value.addrName }}</div>
            <div class="table-item">联系电话：{{ value.addrPhone }}</div>
            <div class="table-item">收货地址：{{ value.areaName + value.address }}</div>
        </div>
        <!--订单信息-->
        <div class="table-list">
            <div class="table-header">订单信息</div>
            <div class="table-item">
                <p>订单编号：{{ value.tradeNo }}</p>
                <p>商品总数：{{ value.goodsNum }}</p>
            </div>
            <div class="table-item">
                <p>订单状态：{{ orderStatus[value.status].label }}</p>
                <p>商品总价：¥{{ value.totalPrice }}</p>
            </div>
            <div class="table-item">
                <p>订单时间：{{ value.createTime }}</p>
                <p>运费：¥0</p>
<!--                <p>运费：¥{{ value.freight }}</p>-->
            </div>
            <div class="table-item">
                <p>付款时间：{{ value.payTime }}</p>
                <p>应付金额：¥{{ value.payPrice }}</p>
            </div>
            <div class="table-item">
                <p>发货时间：{{ value.deliveryTime }}</p>
                <p>支付方式：余额支付</p>
            </div>
            <div class="table-item">
                <p>成交时间：{{ value.confirmTime }}</p>
<!--                <p>交易号：{{ value.tradeNo }}</p>-->
            </div>
        </div>
        <!--物流信息-->
        <div class="table-list">
            <div class="table-header">物流信息</div>
            <div class="table-item">
                <p>快递公司：{{ value.expressName }}</p>
                <p>快递单号：{{ value.expressNo }}</p>
            </div>
        </div>
    </div>
</template>

<script>
	import orderStatus from '../public/orderStatus.js';
	import payType from '../public/payType.js';
	export default {
		name: 'OrderDetail',
		data() {
			return {
				orderStatus: orderStatus,
				payType: payType
			}
        },
        props: {
			value: {
				type: Object,
                default: () => {
                	return {}
                }
            }
        },
	};
</script>

<style lang="stylus" scoped>
.order-detail {
    .table-list {
        border-radius: 4px;
        border: 1px solid #dddddd;
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        }
        .table-header {
            background: #f5f5f5;
            padding: 2px 14px;
            font-weight: 600;
        }
        .table-item {
            padding: 2px 14px;
            border-bottom: 1px solid #f5f5f5;
            &:last-child {
                border-bottom: none;
            }
            flexBox(space-between);
            p {
                width: 50%;
            }
        }
    }
}
</style>